import SwiftUI


struct BudgetView: View {
    @EnvironmentObject var budgetStore: BudgetStore
    @State private var showAddBudget = false
    @State private var animateCards = false

    var body: some View {
        NavigationView {
            ScrollView(showsIndicators: false) {
                VStack(alignment: .leading, spacing: 22) {

                    headerSection
                        .opacity(animateCards ? 1 : 0)
                        .offset(y: animateCards ? 0 : 10)
                        .animation(.easeOut(duration: 0.4), value: animateCards)

                    CategoryBreakdownChart()
                        .environmentObject(budgetStore)
                        .opacity(animateCards ? 1 : 0)
                        .offset(y: animateCards ? 0 : 15)
                        .animation(.easeOut(duration: 0.5).delay(0.05), value: animateCards)

                    VStack(spacing: 18) {
                        ForEach(Array(budgetStore.budgets.enumerated()), id: \.element.id) { index, budget in
                            AestheticBudgetCard(budget: budget)
                                .padding(.horizontal)
                                .opacity(animateCards ? 1 : 0)
                                .offset(y: animateCards ? 0 : 12)
                                .animation(
                                    .spring(response: 0.45, dampingFraction: 0.8)
                                        .delay(0.05 * Double(index)),
                                    value: animateCards
                                )
                        }
                    }

                    Spacer(minLength: 80)
                }
            }

            .background(
                ZStack {
                    LinearGradient(
                        colors: [
                            Color(.systemGray6),
                            Color(.systemGray5).opacity(0.5),
                            Color(.systemGray6)
                        ],
                        startPoint: .top,
                        endPoint: .bottom
                    )
                    .ignoresSafeArea()

                    Image("noiseTexture")
                        .resizable()
                        .scaledToFill()
                        .opacity(0.06)
                        .ignoresSafeArea()
                }
            )

            .navigationBarHidden(true)
            .onAppear { animateCards = true }
            .sheet(isPresented: $showAddBudget) {
                AddBudgetView { newBudget in
                    budgetStore.addBudget(newBudget)
                }
            }
        }

        .overlay(
            Button(action: { showAddBudget = true }) {
                Image(systemName: "plus")
                    .font(.system(size: 22, weight: .bold))
                    .foregroundColor(.white)
                    .frame(width: 58, height: 58)
                    .background(Color.blue)
                    .clipShape(Circle())
                    .shadow(radius: 8, y: 4)
            }
            .padding(.trailing, 24)
            .padding(.bottom, 24),
            alignment: .bottomTrailing
        )
    }

    private var headerSection: some View {
        VStack(alignment: .leading, spacing: 4) {
            Text("Budgets")
                .font(.largeTitle.bold())

            Text("Set limits & track spending")
                .font(.subheadline)
                .foregroundColor(.secondary)
        }
        .padding(.horizontal)
        .padding(.top, 50)
    }
}


import Charts

struct CategoryBreakdownChart: View {
    @EnvironmentObject var budgetStore: BudgetStore

    var data: [(category: String, spent: Double)] {
        budgetStore.budgets.map { ($0.category, $0.spent) }
            .filter { $0.spent > 0 }
    }

    var total: Double {
        data.reduce(0) { $0 + $1.spent }
    }

    var body: some View {
        VStack(alignment: .leading, spacing: 12) {

            Text("Spending Breakdown")
                .font(.title3.bold())
                .padding(.horizontal)

            if data.isEmpty {
                Text("No spending yet")
                    .foregroundColor(.secondary)
                    .padding(.horizontal)
            } else {
                Chart {
                    ForEach(data, id: \.category) { entry in
                        SectorMark(
                            angle: .value("Amount", entry.spent),
                            innerRadius: .ratio(0.55),
                            angularInset: 1.5
                        )
                        .foregroundStyle(by: .value("Category", entry.category))
                    }
                }
                .frame(height: 240)
                .padding(.horizontal)
                .chartLegend(.visible)
            }
        }
        .padding(.top, 8)
    }
}
